<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档上传</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        neutral: {
                            100: '#F9FAFB',
                            200: '#F3F4F6',
                            300: '#E5E7EB',
                            400: '#D1D5DB',
                            500: '#9CA3AF',
                            600: '#6B7280',
                            700: '#4B5563',
                            800: '#1F2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .upload-area-active {
                @apply border-primary bg-primary/5;
            }
            .fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            .slide-up {
                animation: slideUp 0.3s ease-out;
            }
            .pulse-animation {
                animation: pulse 2s infinite;
            }
            .file-item-appear {
                animation: fileAppear 0.3s ease-out;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @keyframes fileAppear {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex items-center justify-center p-4">
<!-- 页面遮罩 -->
<div id="overlay" class="fixed inset-0 bg-black/50 z-40 hidden fade-in"></div>

<!-- 上传模态框 -->
<div id="uploadModal" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-3xl bg-white rounded-xl shadow-card overflow-hidden z-50 hidden slide-up">
    <div class="flex justify-between items-center p-6 border-b border-gray-200">
        <h3 class="text-2xl font-bold text-neutral-800">上传文件</h3>
        <button id="closeModal" class="text-neutral-500 hover:text-neutral-800 transition-colors">
            <i class="fa-solid fa-xmark text-xl"></i>
        </button>
    </div>

    <div class="p-6">
        <div class="mb-6">
            <h4 class="text-lg font-semibold text-neutral-800 mb-2">请上传以下文件</h4>
            <p class="text-neutral-600 text-sm">支持的格式: JPG, PNG, PDF (单个文件不超过5MB)</p>
        </div>

        <!-- 文件类型选项卡 -->
        <div class="mb-6">
            <div class="flex border-b border-gray-200">
                <button class="file-tab px-4 py-2 font-medium text-primary border-b-2 border-primary" data-type="idcard">身份证</button>
                <button class="file-tab px-4 py-2 font-medium text-neutral-500 hover:text-neutral-700" data-type="property">产权证</button>
                <button class="file-tab px-4 py-2 font-medium text-neutral-500 hover:text-neutral-700" data-type="application">申请书</button>
            </div>
        </div>

        <!-- 上传区域 -->
        <div id="idcard-tab" class="file-tab-content">
            <div id="idcard-upload-area" class="upload-area border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center hover:border-primary transition-colors cursor-pointer bg-white">
                <div class="upload-icon mb-4 text-primary">
                    <i class="fa-solid fa-cloud-upload text-5xl"></i>
                </div>
                <h4 class="text-lg font-medium text-neutral-800 mb-2">上传身份证</h4>
                <p class="text-neutral-500 mb-4">点击或拖拽文件到此处上传</p>
                <p class="text-xs text-neutral-400">支持正反面合并上传</p>
                <input type="file" id="idcard-input" class="hidden" accept="image/*,.pdf">
                <button class="mt-4 px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm hover:shadow transform hover:-translate-y-0.5 transition-transform">
                    选择文件
                </button>
            </div>

            <!-- 预览区域 -->
            <div id="idcard-preview" class="mt-6 hidden">
                <h5 class="font-medium text-neutral-700 mb-3">已上传文件</h5>
                <div id="idcard-files" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- 文件预览会动态添加到这里 -->
                </div>
            </div>
        </div>

        <div id="property-tab" class="file-tab-content hidden">
            <div id="property-upload-area" class="upload-area border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center hover:border-primary transition-colors cursor-pointer bg-white">
                <div class="upload-icon mb-4 text-primary">
                    <i class="fa-solid fa-building text-5xl"></i>
                </div>
                <h4 class="text-lg font-medium text-neutral-800 mb-2">上传产权证</h4>
                <p class="text-neutral-500 mb-4">点击或拖拽文件到此处上传</p>
                <input type="file" id="property-input" class="hidden" accept="image/*,.pdf">
                <button class="mt-4 px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm hover:shadow transform hover:-translate-y-0.5 transition-transform">
                    选择文件
                </button>
            </div>

            <!-- 预览区域 -->
            <div id="property-preview" class="mt-6 hidden">
                <h5 class="font-medium text-neutral-700 mb-3">已上传文件</h5>
                <div id="property-files" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- 文件预览会动态添加到这里 -->
                </div>
            </div>
        </div>

        <div id="application-tab" class="file-tab-content hidden">
            <div id="application-upload-area" class="upload-area border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center hover:border-primary transition-colors cursor-pointer bg-white">
                <div class="upload-icon mb-4 text-primary">
                    <i class="fa-solid fa-file-text text-5xl"></i>
                </div>
                <h4 class="text-lg font-medium text-neutral-800 mb-2">上传申请书</h4>
                <p class="text-neutral-500 mb-4">点击或拖拽文件到此处上传</p>
                <input type="file" id="application-input" class="hidden" accept="image/*,.pdf">
                <button class="mt-4 px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm hover:shadow transform hover:-translate-y-0.5 transition-transform">
                    选择文件
                </button>
            </div>

            <!-- 预览区域 -->
            <div id="application-preview" class="mt-6 hidden">
                <h5 class="font-medium text-neutral-700 mb-3">已上传文件</h5>
                <div id="application-files" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- 文件预览会动态添加到这里 -->
                </div>
            </div>
        </div>
    </div>

    <div class="flex justify-end p-6 border-t border-gray-200 bg-neutral-50">
        <button id="cancelUpload" class="px-6 py-2 border border-neutral-300 rounded-lg text-neutral-700 hover:bg-neutral-100 transition-colors mr-3">
            取消
        </button>
        <button id="submitUpload" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm hover:shadow transform hover:-translate-y-0.5 transition-transform">
            提交文件
        </button>
    </div>
</div>

<!-- 主页面内容 -->
<div class="max-w-md w-full bg-white rounded-xl shadow-card p-8 transform hover:-translate-y-1 transition-all duration-300">
    <div class="text-center mb-6">
        <h2 class="text-2xl font-bold text-neutral-800 mb-2">文档上传示例</h2>
        <p class="text-neutral-600">点击按钮上传所需文档</p>
    </div>

    <div class="space-y-4">
        <div class="bg-neutral-50 p-4 rounded-lg">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                    <i class="fa-solid fa-id-card"></i>
                </div>
                <div>
                    <h3 class="font-medium text-neutral-800">身份证</h3>
                    <p class="text-sm text-neutral-500">需上传正反面</p>
                </div>
                <div class="ml-auto">
                    <span class="text-xs px-2 py-1 rounded-full bg-red-100 text-red-600">未上传</span>
                </div>
            </div>
        </div>

        <div class="bg-neutral-50 p-4 rounded-lg">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                    <i class="fa-solid fa-building"></i>
                </div>
                <div>
                    <h3 class="font-medium text-neutral-800">产权证</h3>
                    <p class="text-sm text-neutral-500">房产证明文件</p>
                </div>
                <div class="ml-auto">
                    <span class="text-xs px-2 py-1 rounded-full bg-red-100 text-red-600">未上传</span>
                </div>
            </div>
        </div>

        <div class="bg-neutral-50 p-4 rounded-lg">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                    <i class="fa-solid fa-file-text"></i>
                </div>
                <div>
                    <h3 class="font-medium text-neutral-800">申请书</h3>
                    <p class="text-sm text-neutral-500">填写完整的申请表</p>
                </div>
                <div class="ml-auto">
                    <span class="text-xs px-2 py-1 rounded-full bg-red-100 text-red-600">未上传</span>
                </div>
            </div>
        </div>
    </div>

    <button id="openModal" class="mt-8 w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm hover:shadow transform hover:-translate-y-0.5 transition-transform flex items-center justify-center">
        <i class="fa-solid fa-upload mr-2"></i> 上传所有文档
    </button>
</div>

<script>
    // 初始化页面
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const openModalBtn = document.getElementById('openModal');
        const closeModalBtn = document.getElementById('closeModal');
        const cancelUploadBtn = document.getElementById('cancelUpload');
        const submitUploadBtn = document.getElementById('submitUpload');
        const overlay = document.getElementById('overlay');
        const uploadModal = document.getElementById('uploadModal');
        const fileTabs = document.querySelectorAll('.file-tab');
        const fileTabContents = document.querySelectorAll('.file-tab-content');

        // 打开模态框
        openModalBtn.addEventListener('click', function() {
            overlay.classList.remove('hidden');
            uploadModal.classList.remove('hidden');
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        });

        // 关闭模态框
        function closeModal() {
            overlay.classList.add('hidden');
            uploadModal.classList.add('hidden');
            document.body.style.overflow = ''; // 恢复背景滚动
        }

        closeModalBtn.addEventListener('click', closeModal);
        cancelUploadBtn.addEventListener('click', closeModal);
        overlay.addEventListener('click', closeModal);

        // 标签页切换
        fileTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有标签页的活跃状态
                fileTabs.forEach(t => {
                    t.classList.remove('text-primary', 'border-primary');
                    t.classList.add('text-neutral-500');
                });

                // 添加当前标签页的活跃状态
                tab.classList.remove('text-neutral-500');
                tab.classList.add('text-primary', 'border-b-2', 'border-primary');

                // 隐藏所有内容
                fileTabContents.forEach(content => {
                    content.classList.add('hidden');
                });

                // 显示当前内容
                const tabType = tab.getAttribute('data-type');
                document.getElementById(`${tabType}-tab`).classList.remove('hidden');
            });
        });

        // 上传区域交互
        const uploadAreas = document.querySelectorAll('.upload-area');
        uploadAreas.forEach(area => {
            const fileInput = area.querySelector('input[type="file"]');
            const browseBtn = area.querySelector('button');

            // 点击上传区域或按钮触发文件选择
            area.addEventListener('click', (e) => {
                if (e.target === area || e.target === area.querySelector('.upload-icon') ||
                    e.target === area.querySelector('h4') || e.target === area.querySelector('p')) {
                    fileInput.click();
                }
            });

            browseBtn.addEventListener('click', (e) => {
                e.stopPropagation(); // 防止事件冒泡到上传区域
                fileInput.click();
            });

            // 拖放功能
            area.addEventListener('dragover', (e) => {
                e.preventDefault();
                area.classList.add('upload-area-active');
            });

            area.addEventListener('dragleave', () => {
                area.classList.remove('upload-area-active');
            });

            area.addEventListener('drop', (e) => {
                e.preventDefault();
                area.classList.remove('upload-area-active');

                if (e.dataTransfer.files.length) {
                    handleFileUpload(fileInput, e.dataTransfer.files);
                }
            });

            // 文件选择变化
            fileInput.addEventListener('change', () => {
                if (fileInput.files.length) {
                    handleFileUpload(fileInput, fileInput.files);
                }
            });
        });

        // 处理文件上传
        function handleFileUpload(input, files) {
            const fileType = input.id.split('-')[0]; // 获取文件类型（idcard, property, application）
            const previewContainer = document.getElementById(`${fileType}-preview`);
            const filesContainer = document.getElementById(`${fileType}-files`);

            // 显示预览区域
            previewContainer.classList.remove('hidden');

            // 清空之前的文件预览
            filesContainer.innerHTML = '';

            // 处理每个文件
            Array.from(files).forEach(file => {
                // 检查文件大小
                if (file.size > 5 * 1024 * 1024) { // 5MB
                    alert('文件大小超过5MB，请选择较小的文件');
                    return;
                }

                // 创建文件预览项
                const fileItem = document.createElement('div');
                fileItem.className = 'file-item-appear bg-white border border-neutral-200 rounded-lg p-3 flex items-center hover:shadow-md transition-shadow';

                // 文件图标
                const fileIcon = document.createElement('div');
                fileIcon.className = 'w-10 h-10 rounded bg-primary/10 flex items-center justify-center text-primary mr-3';

                // 根据文件类型设置图标
                if (file.type.startsWith('image/')) {
                    fileIcon.innerHTML = '<i class="fa-solid fa-image"></i>';
                } else if (file.type === 'application/pdf') {
                    fileIcon.innerHTML = '<i class="fa-solid fa-file-pdf"></i>';
                } else {
                    fileIcon.innerHTML = '<i class="fa-solid fa-file"></i>';
                }

                // 文件信息
                const fileInfo = document.createElement('div');
                fileInfo.className = 'flex-1 min-w-0';

                const fileName = document.createElement('p');
                fileName.className = 'text-sm font-medium text-neutral-800 truncate';
                fileName.textContent = file.name;

                const fileSize = document.createElement('p');
                fileSize.className = 'text-xs text-neutral-500';
                fileSize.textContent = formatFileSize(file.size);

                fileInfo.appendChild(fileName);
                fileInfo.appendChild(fileSize);

                // 删除按钮
                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'text-neutral-400 hover:text-red-500 transition-colors';
                deleteBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
                deleteBtn.addEventListener('click', () => {
                    fileItem.classList.add('opacity-0', 'transform', 'translate-x-full');
                    fileItem.style.transition = 'all 0.3s ease-out';

                    setTimeout(() => {
                        fileItem.remove();

                        // 如果没有文件了，隐藏预览区域
                        if (filesContainer.children.length === 0) {
                            previewContainer.classList.add('hidden');
                        }
                    }, 300);
                });

                // 组装文件项
                fileItem.appendChild(fileIcon);
                fileItem.appendChild(fileInfo);
                fileItem.appendChild(deleteBtn);

                // 添加到预览容器
                filesContainer.appendChild(fileItem);
            });
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';

            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));

            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 提交上传
        submitUploadBtn.addEventListener('click', function() {
            // 这里可以添加文件提交逻辑
            alert('文件提交成功！');
            closeModal();
        });
    });
</script>
</body>
</html>
